import React from 'react';
import { Radio, Space, Tooltip } from 'antd';
import {
  ThunderboltOutlined,
  ApartmentOutlined,
  BranchesOutlined,
  SisternodeOutlined,
  AppstoreOutlined
} from '@ant-design/icons';
import LayoutPreview from './LayoutPreview';

/**
 * 布局选择器组件
 * 提供不同布局类型的选择，并显示预览效果
 */
const LayoutSelector = ({ value, onChange }) => {
  // 布局类型定义
  const layoutTypes = [
    {
      key: 'force',
      name: '力导向布局',
      icon: <ThunderboltOutlined />,
      description: '基于物理模拟的节点自然分布，适合展示复杂网络关系'
    },
    {
      key: 'circular',
      name: '环形布局',
      icon: <div style={{ width: 14, height: 14, border: '2px solid currentColor', borderRadius: '50%' }} />,
      description: '节点均匀分布在圆周上，适合展示循环或对等关系'
    },
    {
      key: 'hierarchical',
      name: '层次布局',
      icon: <ApartmentOutlined />,
      description: '按层级关系从上到下排列，适合展示组织结构或分类体系'
    },
    {
      key: 'tree',
      name: '树形布局',
      icon: <BranchesOutlined />,
      description: '从左到右的树状结构，适合展示层级分支关系'
    },
    {
      key: 'radial',
      name: '辐射布局',
      icon: <SisternodeOutlined />,
      description: '从中心向外辐射的结构，适合展示中心与周边的关系'
    },
    {
      key: 'grid',
      name: '网格布局',
      icon: <AppstoreOutlined />,
      description: '节点整齐排列在网格中，适合展示规则的矩阵关系'
    }
  ];

  return (
    <div className="layout-selector">
      <Radio.Group 
        value={value} 
        onChange={e => onChange(e.target.value)}
        style={{ width: '100%' }}
      >
        <Space direction="vertical" style={{ width: '100%' }}>
          {layoutTypes.map(layout => (
            <Tooltip 
              key={layout.key} 
              title={layout.description}
              placement="right"
            >
              <Radio.Button 
                value={layout.key}
                style={{ 
                  width: '100%', 
                  height: 'auto', 
                  padding: '8px 12px',
                  display: 'flex',
                  alignItems: 'center'
                }}
              >
                <div style={{ 
                  display: 'flex', 
                  alignItems: 'center', 
                  justifyContent: 'space-between',
                  width: '100%'
                }}>
                  <div style={{ display: 'flex', alignItems: 'center' }}>
                    <span style={{ marginRight: 8 }}>{layout.icon}</span>
                    <span>{layout.name}</span>
                  </div>
                  <div style={{ width: 60, height: 40 }}>
                    <LayoutPreview layoutType={layout.key} width={60} height={40} />
                  </div>
                </div>
              </Radio.Button>
            </Tooltip>
          ))}
        </Space>
      </Radio.Group>
    </div>
  );
};

export default LayoutSelector;